<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--    <title>Webpack App</title>-->
  <title>Vue</title>
  <style>
    .css{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <Son></Son>
  <ul class="css" v-show="true" v-if="false">
    我是文本
  </ul>
  <Son v-if="true">
    <GSon></GSon>
  </Son>
</div>
<a href="../测试用例/虚拟节点/1.还只是虚拟节点.html">还只是虚拟节点</a>
<a href="../测试用例/虚拟节点/2.真实节点.html">真实节点</a>
<a href="../测试用例/虚拟节点/3.多组件的性能测试.html">多组件的性能测试</a>
<script src="./Vue.js"></script>
<script>
  const GSon = Vue.extend({
    template: '<div >孙子<span>span</span></div>',
    data() {
      return {
        name: 'GSon'
      }
    },
    beforeMount() {
      // console.log('GSon组件bMount')
    }
  })


  const Son = Vue.extend({
    template: '<div><GSon></GSon></div>',
    components: {GSon},
    data() {
      return {
        name: 'Son'
      }
    },
    mounted() {
      this.$nextTick(() => {
        console.log(this.name, 'Son组件')
      })
    },
    beforeMount() {
      // console.log('Son beforeMount');
    },
  })
  const vm = new Vue({
    data: {
      name: 'I'
    },
    el: '#app',
    // 子组件嵌套情况：
    // template: '<div><Son><GSon></GSon></Son>我是文本<Son v-if="true"></Son></div>',
    // template: '<div><Son></Son>我是文本<Son v-if="true"></Son></div>',
    // 不支持 自定义组件单标签的写法，但支持 <img />写法，很奇怪
    // template: '<div><Son/>123<Son v-if="true" /></div>',
    components: {Son, GSon},
    mounted() {
      console.log(this, 'mounted');
      this.name = 2;
    },
    methods: null,
    watch: null,
  });
  // console.log(vm, 'vm');
  if (vm._flag) {
    document.title = 'mine';
    // vm.$data.name = 2;
  }
</script>
</body>
</html>
